<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表循环</title>
</head>
<body>
    <div id="while">
        <input type="button" value="增加元素" @click="add">
        <button @click="remove">减少元素</button>
        <ul>
            <li v-for="(item,index) in country">
                {{index+1}}.国家：{{item}}
            </li>
            <br>
            <li v-for="(item,index) in center">
                {{index+1}}.首都：{{item}}
            </li>
        </ul>
        <h2 v-for="it in fruit">
            {{it.name}}
        </h2>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var whil=new Vue({
        el:"#while",
        data:{
            country:["中国","美国","韩国","日本","澳大利亚","印度","俄罗斯","英国","加拿大"],
            center:["北京","华盛顿","首尔","东京","堪培拉","新德里","莫斯科","伦敦","渥太华"],
            fruit:[{name:"苹果🍎"},{name:"芒果🥭"},{name:"西瓜🍉"}]
        },
        methods:{
            add:function(){
                this.country.push("法国");
                this.center.push("巴黎");
                this.fruit.push({name:"香蕉🍌"})
            },
            remove:function(){
                this.country.pop();
                this.center.pop();
                this.fruit.pop();
            }
        }
    })
</script>

</html>